<template>
	<view class="contract uni-flex-column">
		<CustomNavBar class="navbar" title="服务协商">
			<template v-slot:left>
				<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack"><uni-icons type="left"
						size="20"></uni-icons></view>
			</template>
		</CustomNavBar>
		<view class="box_1 uni-flex-item uni-flex-column">
			<view class="uni-flex uni-align-center info-box">
				<image :src="avatar" mode="aspectFill"></image>
				<text class="title">服务协商编号：{{negotiateNo}}</text>
			</view>
			<view class="content">
				<view class="goods">
					<view class="serviceTitle">可协商服务</view>
					<view class="serviceContent uni-flex uni-flex-wrap">
						<view class="service uni-flex uni-align-center uni-justify-between" :class="item.isselect ? 'service_select' : ''" v-for="(item, index) in service" :key="item.itemId" @click="selectService(item, index)">
							<text class="text1">{{item.itemName}}</text>
							<uni-icons type="checkbox-filled" size="16" :color="item.isselect ? '#2F80ED':'#E2E2E2'"></uni-icons>
						</view>
					</view>
					<view class="priceContent">
						<template v-for="(item, index) in service" :key="item.itemId">
							<view class="uni-flex price uni-align-center" v-if="item.isselect">
								<uni-icons type="minus" size="16" color="#FF6A47"></uni-icons>
								<view class="uni-flex-item center">
									<view class="text1">{{item.itemName}}</view>
									<view class="text2">{{item.itemDes}}</view>
								</view>
								<view class="uni-flex ">
									<input class="price-input" type="number" v-model="item.itemPrice" placeholder="请输入价格" />
									<uni-icons type="compose" size="16" color="#999999"></uni-icons>
								</view>
							</view>
						</template>
						<view class="total">
							<text class="text1">费用小计</text>
							<text class="text2">¥{{totalPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="submit" @click="submit">发送服务协商请求</view>
		</view>
	</view>
</template>

<script setup>
import CustomNavBar from '@/components/custom-navbar/index.vue';
import { ref, onMounted, reactive, watch} from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {negotiateInfo, negotiateSend} from '@/api/serviceNegotiate.js';
import {Decimal} from 'decimal.js';
const service = ref([]);
const avatar = ref('');
const serviceUserId = ref('');
const consumerUserId = ref('');
const negotiateNo = ref('');
const totalPrice = ref(0);
// 监听数组中每个元素的 price 属性变化
watch(
  () => service.value.map(item => item.itemPrice),
  (newValues, oldValues) => {
		console.log(newValues)
		const decimals = newValues.map(item => new Decimal(item));
		totalPrice.value = new Decimal(0);
		decimals.forEach(num => {
			totalPrice.value = totalPrice.value.plus(num);
		});
  },
  { deep: true } // 如果嵌套对象内部属性变化也需要触发
);


const selectService = (item,index) => {
	service.value[index].isselect = !item.isselect;
	service.value[index].price = 0;
};

const submit = async () => {
	if(service.value.some(item => item.isselect)){
		const params = service.value.filter(item => item.isselect).map(item => {
			return {
				itemId: item.itemId,
				itemName: item.itemName,
				itemPrice: item.itemPrice,
				itemDes: item.itemDes,
				itemImg: item.itemImg,
				count:item.count
			}
		});
		
		const res = await negotiateSend({
			negotiateId: negotiateNo.value,
			serviceUserId: serviceUserId.value,
			consumerUserId: consumerUserId.value,
			paymentAmount: totalPrice.value,
			negotiateServices: params
		});
		if (res.code === 200) {
			uni.showToast({
				title: '发送成功',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 1000);
		}
	} else {
		uni.showToast({
			title: '请至少选择一项服务',
			icon: 'none'
		});
	}
};

const goBack = () => {
	uni.navigateBack({
    delta: 1
  })
};

const getServiceList = async () => {
	const res = await negotiateInfo({consumerUserId: consumerUserId.value});
	if (res.code === 200) {
		negotiateNo.value = res.data.negotiateId;
		serviceUserId.value = res.data.serviceUserId;
		service.value = res.data.negotiateServices.map(item => ({
    ...item,
			isselect: false
		}));;
	}
};
onLoad((options) => {
	consumerUserId.value = options.peerid
	getServiceList();
});
onMounted(() => {
	const user = uni.getStorageSync('user_info')
	if (user) {
		avatar.value = JSON.parse(user).avatar
	}
});
</script>

<style scoped lang="scss">
.contract {
	height: 100vh;
	background: linear-gradient(180deg, #EAF3FF 0%, #F9F9F9 100%);

	.navbar {
		width: 100%;
	}

	.back {
		width: 44rpx;
		height: 44rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50%;
	}
}

.box_1 {
	padding: 0 24rpx;
	overflow-y: auto;
	.active {
		border: 2rpx solid #2F80ED;
	}

	.info-box {
		margin: 59rpx 0 34rpx;

		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
		}

		.title {
			margin-left: 24rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}

	}

	.content {
		flex: 1;
		overflow-y: auto; // 允许滚动

		.goods {
			// padding: 31rpx 39rpx 25rpx 25rpx;
			padding: 31rpx 35rpx;
			background: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;

			.serviceTitle {
				font-weight: 500;
				font-size: 34rpx;
				color: #333333;
				margin-bottom: 34rpx;
			}

			.serviceContent {
				gap: 30rpx;
			}

			.service {
				width: 37%;
				padding: 19rpx 28rpx 19rpx 30rpx;
				border-radius: 10rpx;
				border: 2rpx solid #999999;
				.text1 {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					margin-right: 40rpx;
				}

				.text2 {
					font-size: 28rpx;
					color: #333333;
					margin-left: 40rpx;
				}
			}
			.service_select{
				border: 2rpx solid #2F80ED;
				.text1,.text2{
					color:#2F80ED;
				}
			}
			.priceContent{
				margin-top:36rpx;
				.price {
					background: #F7F7F7;
					border-radius: 20rpx;
					margin-bottom:24rpx;
					padding:28rpx;
					.center{
						margin-left:20rpx;
					}
					.text1{
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						margin-bottom:8rpx;
					}
					.text2{
						color: #666666;
						font-weight: 400;
						font-size: 24rpx;
					}
					.price-input{
						width:170rpx;
					}
				}
				.total{
					margin-top:23rpx;
					text-align: right;
					.text1{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
					.text2{
						font-weight: 500;
						font-size: 34rpx;
						color: #333333;
						margin-left:20rpx;
					}
				}
			}
		}

		.desc-content {
			margin-top: 5rpx;
			padding: 32rpx;
			background: #f8f8f8;
			border-radius: 20rpx;
			box-sizing: border-box;

			:deep(.uni-easyinput__content) {
				margin-bottom: 12rpx;
				background-color: #f8f8f8 !important;

				.uni-easyinput__content-textarea {
					height: 270rpx;
				}
			}

			.custom-upload {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 115rpx;
				height: 115rpx;
				border-radius: 10rpx;
				border: 1rpx dashed #cfcfcf;

				.text {
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}
			}
		}

		.select-box {
			margin-top: 24rpx;
			margin-left: 24rpx;

			.radio {
				:deep(.checkbox__inner) {
					width: 30rpx !important;
					height: 30rpx !important;
					border-radius: 50% !important;
				}

				:deep(.checklist-text) {
					margin-left: 24rpx !important;
					font-weight: 400 !important;
					font-size: 28rpx !important;
					color: #999999 !important;
				}
			}
		}
	}

}

.bottom {
	background: #fff;
	padding: 20rpx 24rpx 40rpx;

	.submit {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #2f80ed;
		border-radius: 44px;
		color: white;
		font-size: 30rpx;
	}
}
</style>